<template>
    <div class="detail">
        <div class="title-main ">
            <div class="title-inner web-inner">
                <div class="left">
                    <a href="#/"> <img src="../../static/img/logo2.png" alt=""></a>
                </div>
                <div class="right">
                   <top></top>
                </div>
            </div>
        </div>
        <div class="carouse">
            <div class="btn" @click="go('form')">
                加盟詢問
            </div>
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item,index) in content.brand_main_image" :key="index">
                    <div class="inner-img-box" :style="{backgroundImage:`url(${brandImg+encodeURIComponent(item.image)})`, backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'cover'}"></div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div ref="menu"  class="menu">
            <div class="menu-box"  :class="menuFixed?'fix':''">
                <div class="menu-inner web-inner">
                    <span>{{content.brand_name}}</span>
                    <span @click="go('introduction')">品牌介紹</span>
                    <span @click="go('youshi')">加盟優勢</span>
                    <span @click="go('shuoming')">加盟說明</span>
                    <span @click="go('form')">加盟詢問</span>
                </div>
            </div>
        </div>
        <div class="banner web-inner">
            <div class="left">
                <img :src="brandImg+content.brand_logo" alt="">
            </div>
            <div class="center">
                <div class="title">
                    {{content.brand_name}}
                </div>
                <div class="tips">
                    加盟費用：{{content.fran_fee}}
                </div>
                <div class="tips">
                    加盟專線：{{content.fran_tel}}（請說在開店+看到的）
                </div>
                <div class="tips">
                    總部地址：{{content.frad_addr}}
                </div>
                <div class="btns">
                    <a target="_blank" :href="content.web_addr" >
                        <img src="../../static/img/btn1.png" alt="">
                    </a>
                    <a target="_blank" :href="content.facebook">
                        <img src="../../static/img/btn2.png" alt="">
                    </a>
                    <a target="_blank" :href="content.ins">
                        <img src="../../static/img/btn3.png" alt="">
                    </a>
                </div>
            </div>
            <div class="right">
                <img class="btn" @click="go('form')" src="../../static/img/btn4.png" alt="">
            </div>
        </div>
        <div class="introduction web-inner" ref="introduction">
            <div class="title">
                | 品牌介紹 |
            </div>
            <div class="main">
                <img :src="brandImg+content.brand_logo" alt="">
                <div class="tips" v-html="content.intro_text">
                </div>
            </div>
        </div>
        <div class="brand web-inner" v-if="content.brand_image.length>0">
            <div class="title">
                | 品牌形象 |
            </div>
            <div class="main">
                <div class="main-box" v-for="item in content.brand_image">
                    <img :src="brandImg+item.image" alt="" >
                    <div class="main-box-text">{{item.text}}</div>
                    <!--<div class="search">-->
                        <!--<img src="../../static/img/search.png" alt="">-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        <div class="brand web-inner" v-if="content.brand_product.length>0">
            <div class="title">
                | 產品介紹 |
            </div>
            <div class="main">
                <div class="main-box" v-for="item in content.brand_product">
                    <img :src="brandImg+item.image" alt="" >
                    <div class="main-box-text">{{item.text}}</div>
                    <!--<div class="search">-->
                        <!--<img src="../../static/img/search.png" alt="">-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        <div class="video web-inner" v-if="content.brand_youtube[0]">
            <div class="title">
                | 影音介紹 |
            </div>
            <iframe width="100%" height="600px" :src="content.brand_youtube[0].youtube_src" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="lianxi">
                    <span class="left btn" @click="go('form')">加盟詢問</span>
                    <span class="right">加盟專線：{{content.fran_tel}}（請說在開店+看到的）</span>
        </div>
        <div class="main-text web-inner" ref="youshi" v-if="content.brand_fran_adv.length>0">
            <div class="title">
                | 加盟優勢 |
            </div>
            <div class="main-text-img">
                <img :src="brandImg+item.image" v-bind:key="index" alt="" v-for="(item,index) in content.brand_fran_adv">
            </div>
        </div>
        <div class="main-text web-inner" ref="shuoming" v-if="content.brand_fran_intro.length>0">
                <div class="title">
                | 加盟說明  |
            </div>
            <div class="main-text-img">
                <img :src="brandImg+item.image" v-bind:key="index" alt="" v-for="(item,index) in content.brand_fran_intro">
            </div>
        </div>
        <div class="main-tips web-inner" v-if="content.store_info.length>0">
            <div class="title">
                | 分店資訊  |
            </div>
            <div class="main-tips-item" v-html="content.store_info">
            </div>
        </div>
        <div class="main-news web-inner" v-if="content.brand_media_intro.length>0">
            <div class="title">
                | 媒體介紹  |
            </div>
            <div class="box">
                <div class="main-news-item" v-for="item in content.brand_media_intro">
                    <a :href="item.hyperlink">
                        <div class="main-news-item-img">
                            <img :src="brandImg+item.image" alt="">
                            <div class="mask">
                                <span>前往鏈接</span>
                            </div>
                        </div>
                        <div class="title">
                            {{item.text}}
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="lianxi">
            <span class="left btn" @click="go('form')">加盟詢問</span>
            <span class="right">加盟專線：{{content.fran_tel}}（請說在開店+看到的）</span>
        </div>
        <div class="form web-inner" ref="form">
            <commonForm :brand_id="id" :isDetail="true"></commonForm>
        </div>
        <commonBottom :menu="menu"></commonBottom>
    </div>
</template>

<script>
    import top  from "../components/common-top"
    import commonForm from "../components/common-form-jiameng"
    import commonBottom from "../components/common-bottom"
    import qs from 'qs';
    export default {
        name: "detail",
        components:{
            commonForm,
            commonBottom,
            top
        },
        data() {
            return {
                menuFixed:false,
                list:[
                    {
                        image:"https://sponsor-static.segmentfault.com/8552c525b1f77f394dc07b64cd71cf11.png"
                    },
                    {
                        image:"https://sponsor-static.segmentfault.com/8552c525b1f77f394dc07b64cd71cf11.png"
                    },
                    {
                        image:"https://sponsor-static.segmentfault.com/8552c525b1f77f394dc07b64cd71cf11.png"
                    },
                    {
                        image:"https://sponsor-static.segmentfault.com/8552c525b1f77f394dc07b64cd71cf11.png"
                    },
                    {
                        image:"https://sponsor-static.segmentfault.com/8552c525b1f77f394dc07b64cd71cf11.png"
                    },
                ],
                menu:[
                    {
                        title:"首頁",
                        path:"/"
                    },
                    {
                        title:"24小時加盟展",
                        path:"/jiamengzhan"
                    },
                ],
                id:this.$route.params.id,
                content:{
                    brand_fran_adv:[],
                    brand_fran_intro:[],
                    brand_image:[],
                    brand_logo:"",
                    brand_main_image:[],
                    brand_media_intro:[],
                    brand_name:"",
                    brand_product:[],
                    brand_youtube:[],
                    facebook:"",
                    fk_category:"",
                    frad_addr:"",
                    fran_fee:"",
                    fran_tel:"",
                    ins:"",
                    intro_image:"",
                    intro_text:"",
                    store_info:"",
                    web_addr:"",
                }
            }
        },
        mounted() {
            this.getMenuDis()
            this.getBrandCategory()
            this.getBrandDetail()
        },
        methods:{
          bgSty(item) {
            console.log(item);
          },
            getBrandCategory() {
                this.$http.post(this.API.get_brand_category).then((res) => {
                    let $this = this;
                if(res.status ===200 && res.data.length>0){
                    res.data.forEach((item) => {
                        item.path = "/pinpai/" + item.order
                    this.menu.push(item)
                })
                }
            })
            },
            getBrandDetail() {
                let data= {
                    brand_id:this.id
                }
                this.$http({
                    method:"post",
                    url:this.API.get_brand_detail,
                    data:qs.stringify(data),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    withCredentials:true
                }).then((res) => {
                    if(res.status ===200 && res.data.length>0){
                        this.content = res.data[0];
                      let meta = document.querySelector('#metaKey');
                      let metaDis = document.querySelector('#metaDis');
                      meta.content =this.content.brand_name
                      metaDis.content =this.content.brand_name
                    }
                })
            },
            go(name) {
            let target = this.$refs[name];
            let top = target.offsetTop;
            document.documentElement.scrollTop=top;
          },
            getMenuDis() {
                let target = this.$refs.menu;
                let dis = Math.floor(target.offsetTop)-Math.floor(document.documentElement.scrollTop)
                if(dis<0){
                    this.menuFixed = true
                }else{
                    this.menuFixed = false
                }
                window.onscroll=() => {
                    let dis = Math.floor(target.offsetTop)-Math.floor(document.documentElement.scrollTop)
                    console.log(Math.floor(target.offsetTop));
                    if(dis<0){
                        this.menuFixed = true
                    }else{
                        this.menuFixed = false
                    }
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
.detail{
    *{
        box-sizing: border-box;
    }
    width: 100%;
    margin: 0 auto;
    .title-main{
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        height: 80px;
        background-color: #333333;
        line-height: 80px;
        color: #808080;
        .title-inner{
            height: 100%;
            margin:  0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .left{
            height: 50px;
            img{
                height: 100%;
            }
        }
        .right{
            font-size: 16px;
            span{
                margin-left: 5px;
                margin-right: 5px;
                &:last-child{
                    margin-right: 25px;
                }
                &:nth-child(2n-1){
                    cursor: pointer;
                    &:hover{
                        color: #ffffff;
                    }
                }
            }
        }
    }
    .carouse{
        position: relative;
        //width: @width;
        margin: 0 auto;
        height: 800px;
        .inner-img-box{
            width: 100%;
            height: 100%;
        }
        .img{
            width: 100%;
            height: 100%;
        }
        .btn{
            position: absolute;
            width: 180px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #ffffff;
            background-color: @bgColor;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 30px;
            font-size: 20px;
            z-index: 10000000000000000;
        }
    }
    .menu{
        margin: 0 auto;
        width:100%;
        height: 60px;
        line-height: 60px;
        .menu-box{
            margin: 0 auto;
            width:100%;
            height: 60px;
            line-height: 60px;
            background-color: @bgColor;
            &.fix{
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100000;
            }
        }

        .menu-inner{
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            color: #ffffff;
            font-size: 16px;
            text-align: center;
            span{
                flex: 1;
                text-align: center;
                height: 100%;
                cursor: pointer;
            }
        }
    }
    .banner{
        box-sizing: border-box;
        background-color: #ffffff;
        margin: 0 auto;
        padding: 30px 50px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        div{
            flex: 1;
            word-break: break-all;
        }
        .left{
            overflow:hidden;
            /*border: 2px solid #e6e6e6;*/
            display: flex;
            align-items: center;
            height: 280px;
            img{
                width: 100%;

            }
        }
        .center{
            margin: 0 40px;
            line-height: 30px;
            font-size: 18px;
            .title{
                font-size: 24px;
                line-height: 40px;
                color: #000000;
                font-weight: bold;
            }
            .btns{
                margin-top: 30px;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                a{
                    width: 25%;
                }
                img{
                    width: 100%;
                    cursor: pointer;
                }
            }
        }
        .right{
            height: 280px;
            img{
                height: 280px;
            }
        }

    }
    .introduction{
        margin: 0 auto;
        padding:  50px;
        background-color: #fafafa;
        .title{
            font-size: 50px;
            line-height: 50px;
            margin-bottom: 30px;
            width: 400px;
            img{
                width: 100%;
            }
        }
        .main{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            img{
                margin-right: 5%;
                width: 47.5%
            }
        }
        .tips{
            width: 47.5%;
            font-size: 28px;
            line-height: 42px;
        }
    }
    .brand{
        margin: 0 auto;
        background-color: #ffffff;
        .title{
            padding: 50px 50px 30px 50px;
            font-size: 50px;
            line-height: 50px;
            margin-bottom: 30px;
            width: 400px;
            img{
                width: 100%;
            }
        }
        .main{
            width: 100%;
            .main-box{
                display: inline-block;
                width: 33%;
                position: relative;
                overflow: hidden;
                .main-box-text{
                    position: absolute;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    color: #ffffff;
                    background-color: rgba(0,0,0,.5);
                    bottom: 0;
                    left: 0;
                }
                .search{
                    display: none;
                }
                &:last-child{
                    position: relative;
                    .search{
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0,0,0,0.5);
                        img{
                            width: 50px;
                            height: 50px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                        }
                    }
                }
                img{
                    width: 100%;
                    height: 100%;
                }

            }
        }
    }
    .video{
        margin: 0 auto;
        background-color: #ffffff;
        padding:50px;
        .title{
            font-size: 50px;
            line-height: 50px;
            margin-bottom: 30px;
            width: 400px;
            img{
                width: 100%;
            }
        }
    }
    .lianxi{
        width: 100%;
        height: 140px;
        background-color: #fafafa;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        span{
            box-sizing: border-box;
            padding:0px 40px;
            font-size: 22px;
            line-height: 70px;
            display: inline-block;
            height: 70px;
            border-radius: 70px;
            &.left{
                background-color: @bgColor;
                color: #ffffff;
                text-align: center;
                margin-right: 100px;
            }
            &.right{
                border: 2px solid @bgColor;
                color: @bgColor;
            }
        }
    }
    .main-text{
        margin: 0 auto;
        background-color: #ffffff;
        padding:50px 0;
        .title{
            padding-left: 50px;
            font-size: 50px;
            line-height: 50px;
            margin-bottom: 30px;
            width: 400px;
            img{
                width: 100%;
            }
        }
        .main-text-img{
            display: flex;
            flex-direction: column;
            img{
                width: 100%;
            }
        }
    }
    .main-tips{
        margin: 0 auto;
        background-color: #fafafa;
        padding:50px 30px;
        .title{
            font-size: 50px;
            line-height: 50px;
            margin-bottom: 30px;
            width: 400px;
            img{
                width: 100%;
            }
        }
        .main-tips-item{
            display: flex;
            flex-direction: row;
            font-size: 24px;
            line-height: 36px;
            .left
            {
                width: 100px;
            }        }

    }
    .main-news{
        margin: 0 auto;
        background-color: #ffffff;
        padding:50px 30px;
        .title{
            font-size: 50px;
            line-height: 50px;
            margin-bottom: 30px;
            width: 400px;
            img{
                width: 100%;
            }
        }
        .box{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .main-news-item{
               width: 33%;
                margin-right: 10px;
                .main-news-item-img{
                    position: relative;
                    width: 100%;
                    height: 180px;
                    overflow: hidden;
                    cursor: pointer;
                        &:hover .mask{
                        display: block;
                    }
                    img{
                        width: 100%;
                    }
                    .mask{
                        display: none;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(255,255,255,0.5);
                        span{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            display: inline-block;
                            background-color:#1a9cc9;
                            color: #ffffff;
                            font-size: 16px;
                            text-align: center;
                            line-height: 40px;
                            height: 40px;
                            width: 100px;
                            border-radius: 40px;
                        }
                    }
                }
                .title{
                    font-size: 14px;
                    line-height: 22px;
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-bottom: 10px;
                    padding: 0 10px;
                }
                .text{
                    padding:  0 10px;
                    font-size: 12px;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
    .form{
        margin: 20px auto;
    }
}
</style>
<style lang="less">
    .detail{
        .carouse{
            .el-carousel{
                height: 100%;
                width: 100%;
            }
            .el-carousel__container{
                height: 100%;
                width: 100%;
            }
            img{
                width: 100%;
                height:100%;
            }
            .el-carousel__indicators--outside{
                position: absolute;
                transform: translateX(-50%);
            }
            .el-carousel__arrow{
                width: 80px;
                height: 80px;
                font-size: 40px;

            }
        }
    }
    .btn{
        cursor: pointer;
    }
</style>